﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DrawBoard.aspx.cs" Inherits="OnlineCooperation.DrawBoard" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>DrawBoard</title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="css/s.css" rel="stylesheet" />
    <link href="css/jquery.pageslide.css" rel="Stylesheet" />
    <script src="js/jquery.js"></script>
    
    <script src="js/firebase.js"></script>
    <script src="js/jquery.pageslide.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            //聊天
            function ml_close_demo() {
                $('.float-news').animate({
                    right: '-450px'
                }, 300, function () {
                    $('.float-open').delay(50).animate({
                        right: '-2px'
                    }, 300);
                });
            }
            function ml_open_demo() {
                $('.float-open').animate({
                    right: '-70px'
                }, 100, function () {
                    $('.float-news').delay(50).animate({
                        right: '0px'
                    }, 300);
                });
            }

            $('.float-close').click(function () {
                ml_close_demo();
                return false;
            });
            $('.open-btn').click(function () {
                ml_open_demo();
                return false;
            });
            setTimeout(function () { ml_close_demo() }, 1000);
        });
    </script>
    <link href="css/firebase2.css" rel="stylesheet" />
    <style type="text/css">
        body {
            _background-image: url(about:blank); /*用浏览器空白页面作为背景*/
            _background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
            font: 14px/180% Arial, Helvetica, sans-serif, "新宋体";
            padding-top: 60px;
            padding-bottom: 40px; /*background: rgb(246,249,253);*/
            background: url(img/brickwall.png) repeat 0 0;
            font: 14px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #000000;
            -webkit-font-smoothing: antialiased;
            -webkit-text-size-adjust: none;
        }

        /* Custom container */
        .container-narrow {
            margin: 0 auto;
            max-width: 1140px;
        }

            .container-narrow > hr {
                margin: 30px 0;
            }

        /* float-news */
        .float-news, .float-open {
            background: #fbfbfb;
            border: 2px solid #e1e1e1;
            border-right: 0 none;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            display: inline-block;
            font-size: 16px;
        }

        .float-news {
            height: 380px;
            right: 0px;
            padding: 10px 15px;
            width: 300px;
            z-index: 100;
            top: 117px;
            _margin-top: 117px;
        }

        .float-open {
            height: 48px;
            right: -70px;
            padding: 4px 4px 4px 6px;
            width: 48px;
            z-index: 99;
            top: 206px;
            _margin-top: 206px;
        }

        .float-news, .float-open {
            position: fixed;
            *zoom: 1;
            _position: absolute;
            _top: expression(eval(document.documentElement.scrollTop));
            right: 2px;
        }

        .float-close {
            background: url(img/nav-close.png) no-repeat right top;
            overflow: hidden;
            height: 48px;
            opacity: .6;
            filter: alpha(opacity=60);
            position: absolute;
            right: 9px;
            text-indent: 100%;
            top: 10px;
            white-space: nowrap;
            width: 48px;
        }

        .open-btn {
            background: url(img/ml-open-demo.png) no-repeat right top;
            display: block;
            overflow: hidden;
            height: 48px;
            opacity: .6;
            filter: alpha(opacity=60);
            text-indent: 100%;
            white-space: nowrap;
            width: 48px;
            transform: rotateY(180deg);
            -moz-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1);
            /*IE*/
            filter: FlipH;
        }

            .float-close:hover, .open-btn:hover {
                opacity: 1;
                filter: alpha(opacity=100);
            }

        .newslist h3 {
            color: #333;
            border-bottom: 4px solid #F2F2F2;
            font-size: 26px;
            height: 54px;
            line-height: 54px;
            font-family: Microsoft Yahei,simsun,arial,sans-serif;
        }

        .newslist ul {
            margin-top: 10px;
        }

        .newslist li {
            position: relative;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            border-bottom: 1px #ccc dotted;
        }

            .newslist li a {
                color: #404040;
            }

            .newslist li span {
                position: absolute;
                right: 0;
                color: #ccc;
            }

            .newslist li:last-child {
                border-bottom: 0;
            }

        #NavSlide00 {
             width: 940px;
            padding: 10px;
            margin: 0 auto;
            
        }
    </style>
    <style type="text/css">
        .divscroll {
            /*   滚动条 */ /*   overFlow: auto ; */ /* visible ：却省的 hidden auto scroll */
            overflow-y: scroll; /*   滚动条相关的颜色属性 */
            scrollbar-face-color: green; /* 滑块 */
            scrollbar-hightlight-color: red; /* 高亮 */
            scrollbar-3dlight-color: orange; /* 3维光线 */
            scrollbar-darkshadow-color: blue; /* 暗影    */
            scrollbar-shadow-color: yellow; /* 阴影   */
            scrollbar-arrow-color: purple; /* 箭头 */
            scrollbar-track-color: black; /* 滑道颜色 */
            scrollbar-base-color: pink; /* 主要颜色 */
        }
    </style>
</head>
<body>
    <form id="FormTeamPage" runat="server">
        <div class="container-narrow">
            <div class="subMenu">
                <div class="navbar navbar-static">
                    <div class="navbar-inner">
                        <div class="container" style="width: auto;">
                            <a id="sTop" class="brand" href="#">
                                <%=Session["UserName"] %>
                            </a>
                            <ul class="nav" role="navigation">
                                <li class="dropdown"><a id="drop1" href="#" role="button" class="dropdown-toggle"
                                    data-toggle="dropdown">个人信息</a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">修改头像</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">修改用户名</a></li>
                                        <li role="presentation" class="divider"></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">修改密码</a></li>
                                    </ul>
                                </li>
                                <li><a href="#" id="s1" class="subNavBtn" role="button">团队信息</a></li>
                                <li><a href="#" id="s2" class="subNavBtn" role="button">文件管理</a></li>
                                <li><a href="#" id="s3" class="subNavBtn" role="button">在线画板</a></li>
                            </ul>
                            <ul class="nav pull-right">
                                <li><a href="HomePageJump.aspx" target="_parent" class="dropdown">返回首页</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    <div class="row-fluid">
        <div class="span2">
            <ul class="nav nav-list" contenteditable="false">
            <li class="nav-header">列表标题</li>
            <li><a href="TeamPage.aspx">团队信息</a></li>
            <li><a href="TeamMember.aspx">团队成员</a></li>
            <li class="divider"></li>
            <li class="nav-header">协作平台</li>
            <li><a href="TeamFile.aspx">文件管理</a></li>
            <li class="active"><a href="DrawBoard.aspx">画板</a></li>
            <li><a href="#">帮助</a></li>
        </ul>
        </div>
        
        <div class="span8">
            <div>
                <canvas id="drawing-canvas" width="800" height="600"></canvas>
            </div>
            <div id="colorholder"></div>
            <script>
                $(document).ready(function () {
                    //Set up some globals
                    var pixSize = 2, lastPoint = null, currentColor = "000", mouseDown = 0;

                    //Create a reference to the pixel data for our drawing.
                    var pixelDataRef = new Firebase('https://ebjgyukkcvp.firebaseio-demo.com/');

                    // Set up our canvas
                    var myCanvas = document.getElementById('drawing-canvas');
                    var myContext = myCanvas.getContext ? myCanvas.getContext('2d') : null;
                    if (myContext == null) {
                        alert("You must use a browser that supports HTML5 Canvas to run this demo.");
                        return;
                    }
                    myContext.fillStyle = "#ffffff";
                    myContext.fillRect(0, 0, myCanvas.width, myCanvas.height);
                    //Setup each color palette & add it to the screen
                    var colors = ["fff", "000", "f00", "0f0", "00f", "88f", "f8d", "f88", "f05", "f80", "0f8", "cf0", "08f", "408", "ff8", "8ff"];
                    for (c in colors) {
                        var item = $('<div/>').css("background-color", '#' + colors[c]).addClass("colorbox");
                        item.click((function () {
                            var col = colors[c];
                            return function () {
                                currentColor = col;
                            };
                        })());
                        item.appendTo('#colorholder');
                    }

                    //Keep track of if the mouse is up or down
                    myCanvas.onmousedown = function () { mouseDown = 1; };
                    myCanvas.onmouseout = myCanvas.onmouseup = function () {
                        mouseDown = 0; lastPoint = null;
                    };

                    //Draw a line from the mouse's last position to its current position
                    var drawLineOnMouseMove = function (e) {
                        if (!mouseDown) return;

                        e.preventDefault();

                        // Bresenham's line algorithm. We use this to ensure smooth lines are drawn
                        var offset = $('canvas').offset();
                        var x1 = Math.floor((e.pageX - offset.left) / pixSize - 1),
                    y1 = Math.floor((e.pageY - offset.top) / pixSize - 1);
                        var x0 = (lastPoint == null) ? x1 : lastPoint[0];
                        var y0 = (lastPoint == null) ? y1 : lastPoint[1];
                        var dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0);
                        var sx = (x0 < x1) ? 1 : -1, sy = (y0 < y1) ? 1 : -1, err = dx - dy;
                        while (true) {
                            //write the pixel into Firebase, or if we are drawing white, remove the pixel
                            pixelDataRef.child('<%=Session["TeamID"]%>').child(x0 + ":" + y0).set(currentColor === "fff" ? null : currentColor);

                                if (x0 == x1 && y0 == y1) break;
                                var e2 = 2 * err;
                                if (e2 > -dy) {
                                    err = err - dy;
                                    x0 = x0 + sx;
                                }
                                if (e2 < dx) {
                                    err = err + dx;
                                    y0 = y0 + sy;
                                }
                            }
                            lastPoint = [x1, y1];
                        };
                        $(myCanvas).mousemove(drawLineOnMouseMove);
                        $(myCanvas).mousedown(drawLineOnMouseMove);

                        // Add callbacks that are fired any time the pixel data changes and adjusts the canvas appropriately.
                        // Note that child_added events will be fired for initial pixel data as well.
                        var drawPixel = function (snapshot) {
                            var coords = snapshot.name().split(":");
                            myContext.fillStyle = "#" + snapshot.val();
                            myContext.fillRect(parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);
                        };
                        var clearPixel = function (snapshot) {
                            var coords = snapshot.name().split(":");
                            myContext.clearRect(parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);
                        };
                        pixelDataRef.child('<%=Session["TeamID"]%>').on('child_added', drawPixel);
                pixelDataRef.child('<%=Session["TeamID"]%>').on('child_changed', drawPixel);
                        pixelDataRef.child('<%=Session["TeamID"]%>').on('child_removed', clearPixel);
                    });
            </script>


            <!-- 聊天板 -->
            <div class="float-open" id="float-open" style="right: -2px;">
                <a class="open-btn" href="javascript:void(0);">&gt;</a>
            </div>

            <div class="float-news" id="float-news" style="right: -450px;">
                <a class="float-close" href="javascript:void(0);">X</a>
                <div class="newslist">
                    <h3>聊天板
                    </h3>
                    <div id='messagesDiv' class="divscroll" style="height: 200px;">
                    </div>
                    <div>
                        <asp:Label ID="Label1" runat="server" Text="我说："></asp:Label>
                        <input type='text' id='messageInput' placeholder='Message' />
                    </div>
                </div>
            </div>
        </div>
        <div class="span2">
        </div>
    </div>

    <script type="text/javascript">
        var myDataRef = new Firebase('https://ofp5sw6af7y.firebaseio-demo.com/');
        $('#messageInput').keypress(function (e) {
            if (e.keyCode == 13) {
                var name = '<%=Session["UserName"]%>';
                var text = $('#messageInput').val();
                myDataRef.child('<%=Session["TeamID"]%>').push({ name: name, text: text });
                    $('#messageInput').val('');
                }
        });
            myDataRef.child('<%=Session["TeamID"]%>').on('child_added', function (snapshot) {
            var message = snapshot.val();
            displayChatMessage(message.name, message.text);
        });
        function displayChatMessage(name, text) {
            $('<div/>').text(text).prepend($('<strong/>').text(name + ': ')).appendTo($('#messagesDiv'));
            $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
        };
    </script>
</body>
</html>
